<template>
    <AoeCard>
        <AoeRowForm
            v-if="advance"
            layout="special"
            :elements="cSearch"
            class="advance-search"
            v-model="queries"
            size="sm"
        >
            <AoeCol lg="4">
                <AoeFormItem class="field">
                    <AoeButton @click="onsearch" theme="primary" size="xs">查询</AoeButton>
                    <AoeButton @click="onreset" theme="success" size="xs">重置</AoeButton>
                    <AoeButton @click="trigger" size="xs">简单 <UpIcon /></AoeButton>
                </AoeFormItem>
            </AoeCol>
        </AoeRowForm>
        <AoeSchemaForm
            layout="inline"
            :elements="cSimple"
            class="inline-search"
            v-else
            v-model="queries"
        >
            <AoeFormItem class="field">
                <AoeButton @click="onsearch" theme="primary">查询</AoeButton>
                <AoeButton @click="onreset" theme="success">重置</AoeButton>
                <AoeButton @click="trigger">高级 <DownIcon /></AoeButton>
            </AoeFormItem>
        </AoeSchemaForm>
    </AoeCard>
    <AoeCard>
        <AoeSchemaTable
            :columns="cColumns"
            :data="rows"
            stripe
            selector
            :page="page"
            default-toolbar
            height="100%"
            v-model:selected-keys="ids"
        >
            <!--suppress VueUnrecognizedSlot -->
            <template #$operator="{ row }">
                <AoeToolbar
                    v-bind="props.operator"
                    class="operator-cell"
                    @command="onoperation($event, row as Row)"
                ></AoeToolbar>
            </template>
            <template #toolbar>
                <AoeToolbar
                    v-bind="toolbar"
                    class="operator-cell"
                    @command="ontoolbar($event)"
                    :values="cToolbarParams"
                ></AoeToolbar>
            </template>
            <!--suppress VueUnrecognizedSlot -->
            <template #footer></template>
        </AoeSchemaTable>
    </AoeCard>
</template>

<script setup lang="ts">
import AoeSchemaTable, { type TagColumn } from 'table-ui-aoe';
import type { MarkColumn } from 'table-ui-aoe';
import type { ColumnSchema, FieldSchema, IValues, QueryField, QueryItem, Row, ToolbarSchema } from 'aoe';
import { AoeToolbar, type SchemaBtn } from 'toolbar-ui-aoe';
import { AoeCol, type ICommand } from 'ui-aoe';
import { AoeCard, AoeFormItem, DownIcon, UpIcon } from 'ui-aoe';
import { computed, reactive, ref, toRaw } from 'vue';
import { AoeSchemaForm, AoeRowForm } from 'form-ui-aoe';
import { AoeButton } from 'ui-aoe';

type DataType = {
    name: string;
    gender: boolean;
    like: (0 | '1' | 2 | '3')[];
    level: 0 | '1' | 2 | '3';
};

const operator = {
    items: [
        {
            label: '编辑',
            theme: 'success',
            command: 'edit',
        },
        {
            label: '删除',
            theme: 'danger',
            confirm: '确定要删除？',
            command: 'delete',
        },
    ] as SchemaBtn[],
    common: {
        size: 'xs',
        face: 'light',
    },
} as ToolbarSchema;
const toolbar = {
    items: [
        {
            label: '新增',
            theme: 'primary',
            command: {
                url: '/add',
                payload: false,
                type: 'GET',
            },
        },
        {
            label: '删除',
            theme: 'danger',
            confirm: '确定要删除？',
            command: {
                url: '/delete',
                payload: 'ids',
                type: 'GET',
            },
            when: { selected: true },
        },
    ] as SchemaBtn[],
    common: {
        size: 'xs',
        face: 'light',
    },
} as ToolbarSchema;

const props = {
    columns: [
        {
            name: 'name',
            id: 'name',
            label: '姓名',
            align: 'center',
            width: '100px',
        },
        {
            name: 'gender',
            label: '性别',
            id: 'gender',
            cell: 'gender',
            width: '70px',
            align: 'center',
        },
        {
            name: 'like',
            label: '爱好',
            id: 'like',
            cell: 'mark',
            options: [
                {
                    label: '足球',
                    value: 0,
                },
                {
                    label: '篮球',
                    value: '1',
                    theme: 'success',
                },
                {
                    label: '排球',
                    value: 2,
                },
                {
                    label: '棒球',
                    value: '3',
                },
            ],
            theme: 'primary',
        } as MarkColumn,
        {
            name: 'level',
            label: '等级',
            id: 'level',
            cell: 'tag',
            options: [
                {
                    label: '麻瓜',
                    value: 0,
                },
                {
                    label: '入门',
                    value: '1',
                    theme: 'danger',
                },
                {
                    label: '中级',
                    value: 2,
                },
                {
                    label: '高级',
                    value: '3',
                },
            ],
        } as TagColumn,
    ] as ColumnSchema[],
    operator,
    simple: [
        {
            name: 'name',
            label: '姓名',
            id: 'name-name',
        },
        {
            name: 'from',
            label: '籍贯',
            widget: 'select',
            options: [
                {
                    label: '临汾',
                    value: 0,
                },
                {
                    label: '太原',
                    value: 1,
                },
            ],
            id: 'from-from',
        },
    ] as QueryField[],
    search: [
        {
            name: 'name',
            label: '姓名',
            col: 4,
            id: 'name-name',
        },
        {
            name: 'from',
            label: '籍贯',
            widget: 'select',
            options: [
                {
                    label: '临汾',
                    value: 0,
                },
                {
                    label: '太原',
                    value: 1,
                },
            ],
            col: 6,
            id: 'from-from',
        },
    ] as QueryField[],
};
const rows = [
    {
        id: 1,
        name: '张三',
        gender: true,
        like: [2, '1'],
        level: '1',
    },
    {
        id: 2,
        name: '李四',
        gender: false,
        like: ['3'],
        level: 2,
    },
    {
        id: 3,
        name: '王五',
        gender: false,
        like: [0],
        level: '3',
    },
    {
        id: 4,
        name: '张三',
        gender: true,
        like: [2, '1'],
        level: '1',
    },
    {
        id: 5,
        name: '李四',
        gender: false,
        like: ['3'],
        level: 2,
    },
    {
        id: 6,
        name: '王五',
        gender: false,
        like: [0],
        level: '3',
    },
    {
        id: 7,
        name: '张三',
        gender: true,
        like: [2, '1'],
        level: '1',
    },
    {
        id: 8,
        name: '李四',
        gender: false,
        like: ['3'],
        level: 2,
    },
    {
        id: 9,
        name: '王五',
        gender: false,
        like: [0],
        level: '3',
    },
    {
        id: 10,
        name: '张三',
        gender: true,
        like: [2, '1'],
        level: '1',
    },
] as (Row & DataType)[];


const queries = ref<IValues>({});
const onreset = () => (queries.value = {});

const ids = ref([]);
const cToolbarParams = computed(() => ({
    ids: ids.value,
    selected: ids.value.length > 0,
}));

const cColumns = computed(() => {
    const cs = [...props.columns];
    if (props.operator) {
        cs.push({
            label: props.operator.label ?? '操作',
            width: '150px',
            cell: 'operator',
            name: 'operator',
            fixed: 'right',
            ignoreExport: true,
            align: 'center',
        } as ColumnSchema);
    }
    return cs;
});
const page = reactive({ current: 1, limit: 10, total: 100 });

const advance = ref(false);
const trigger = () => (advance.value = !advance.value);

const convert_filed = (field: QueryField) =>
    ({
        ...field,
        name: field.id,
    }) as FieldSchema;
const cSimple = computed<FieldSchema[]>(() => props.simple?.map(convert_filed));
const cSearch = computed<FieldSchema[]>(() => props.search?.map(convert_filed));

const onoperation = (c?: ICommand, row?: Row) => {
    console.log(c, row?.id);
};
const ontoolbar = (c?: ICommand) => {
    console.log(c, { ids: toRaw(ids.value) });
};
const onsearch = (s: boolean = true) => {
    const vs: QueryItem[] =
        (s ? props.simple : props.search)
            ?.filter((f) => f.id && queries.value?.[f.id] !== undefined)
            .map(
                (f) =>
                    ({
                        field: f.name,
                        value: queries.value?.[f.id as string],
                        operator: f.operator,
                        computed: f.computed,
                    }) as QueryItem,
            ) ?? [];

    console.log(JSON.stringify(vs));
};
</script>

<style scoped>
.operator-cell {
    /*noinspection CssUnusedSymbol*/
    :deep(& .btn) {
        margin-bottom: 0;
    }
}

.inline-search {
    :deep(& .field) {
        margin-top: 20px;
    }
}

.advance-search {
    :deep(& .field) {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 10px;
    }
}
</style>
